import React from 'react';
import { Card, Row, Col, Statistic, Button } from 'antd';
import { ArrowUpOutlined, ArrowDownOutlined, UserOutlined } from '@ant-design/icons';
import styled from '@emotion/styled';

/**
 * 首页组件
 * 展示系统概览信息和快捷操作
 */
const Home: React.FC = () => {
  return (
    <HomeContainer>
      <WelcomeSection>
        <h1>欢迎使用 TK 管理系统</h1>
        <p>这是一个基于 React 18 + Antd 5 + TypeScript 构建的现代化管理系统</p>
      </WelcomeSection>

      <StatsSection>
        <Row gutter={16}>
          <Col span={6}>
            <Card>
              <Statistic
                title="总用户数"
                value={11280}
                precision={0}
                valueStyle={{ color: '#3f8600' }}
                prefix={<ArrowUpOutlined />}
                suffix="人"
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="活跃用户"
                value={9280}
                precision={0}
                valueStyle={{ color: '#cf1322' }}
                prefix={<ArrowDownOutlined />}
                suffix="人"
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="今日访问"
                value={1128}
                precision={0}
                valueStyle={{ color: '#1890ff' }}
                prefix={<UserOutlined />}
                suffix="次"
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="系统状态"
                value="正常"
                valueStyle={{ color: '#52c41a' }}
              />
            </Card>
          </Col>
        </Row>
      </StatsSection>

      <QuickActions>
        <Card title="快捷操作" extra={<a href="#">更多</a>}>
          <ActionButtons>
            <Button type="primary" size="large">
              创建任务
            </Button>
            <Button size="large">
              查看报表
            </Button>
            <Button size="large">
              系统设置
            </Button>
            <Button size="large">
              用户管理
            </Button>
          </ActionButtons>
        </Card>
      </QuickActions>
    </HomeContainer>
  );
};

// 样式组件
const HomeContainer = styled.div`
  padding: 0;
`;

const WelcomeSection = styled.div`
  text-align: center;
  margin-bottom: 32px;
  
  h1 {
    font-size: 28px;
    color: #1890ff;
    margin-bottom: 8px;
  }
  
  p {
    font-size: 16px;
    color: #666;
  }
`;

const StatsSection = styled.div`
  margin-bottom: 32px;
`;

const QuickActions = styled.div`
  margin-bottom: 32px;
`;

const ActionButtons = styled.div`
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
`;

export default Home;